<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>

    <!-- Bootstrap -->
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <style type="text/css">
      .img-thumbnail{
        border:none;
      }
    </style>

    <div class="container">
    	<div class="row" style="margin-left:-30px;margin-right:-30px">
    		<div class="col-md-10 col-md-offset-1" style="margin-top:20px">
    			<img src="IMG_4526.JPG" alt="..." class="img-thumbnail">
    		</div>
    	</div>
      <div style="min-height:200px;background-color: #f3f3f3;
    border: 1px solid #ddd;
    border-radius: 4px;    
    margin-left: -10px;
    margin-right: -10px;
    padding-left:15px;
    padding-right:15px">
    	<div class="row"  style="margin-top:20px">
    		<div class="col-xs-8 col-sm-8 col-md-8">
          <input type="text" class="form-control" id="sim" placeholder="输入你的SIM卡号">
		    </div>
        <div class="col-xs-2 col-sm-2 col-md-2">
          <button id="search" type="submit" class="btn btn-primary">查询</button>
        </div>
		  </div>

      <div class="row hidden" id="un-open-block"  style="margin-top:20px">
        <div class="col-xs-5 col-sm-5 col-md-5">
          <p class="text-success" style="padding-left:5px;padding-top:10px">SIM卡号未开通</p>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2">
          <button id="open" type="submit" class="btn btn-success">去开通</button>
        </div>
      </div>

      <div class="row hidden" id="un-exist-block" style="margin-top:20px">
        <div class="col-xs-5 col-sm-5 col-md-5">
          <p class="text-danger" style="padding-left:5px;padding-top:10px">SIM卡号不存在</p>
        </div>
      </div>

      <div class="row hidden" id="dead-line-block" style="margin-top:20px">
        <div class="col-xs-5 col-sm-5 col-md-5">
          <p class="text-danger" style="padding-left:5px;padding-top:10px">SIM卡已过期。如果需要帮助，请联系“微信客服 taiwangoing888””</p>
        </div>
      </div>

      <div class="row hidden" id="result-block"  style="margin-top:20px">
          <p id="sim-text" class="text-info" style="padding-left:20px;padding-top:5px">SIM卡号</p>
          <p id="time-text" class="text-info" style="padding-left:20px;">开通时间</p>
          <p id="type-text" class="text-info" style="padding-left:20px;">类型</p>
          <p class="text-info" style="padding-left:20px;padding-top:15px">如果需要修改，请联系“微信客服 taiwangoing888”</p>

      </div>
      </div>
      <div class="row"  style="margin-left:-30px;margin-right:-30px">
        <div class="col-md-10 col-md-offset-1">
          <img src="IMG_4527.JPG" alt="..." class="img-thumbnail">
        </div>
      </div>
  </div>
    
    <script type="text/javascript">
        $(document).ready(function(){

          $("#open").click(function(){
            window.location.href="input.html?sim="+$("#sim").val()+"&type="+$("#type-text").html();
          });
          
          $("#search").click(function(){
            $("#un-open-block").addClass("hidden");
            $("#un-exist-block").addClass("hidden");
            $("#result-block").addClass("hidden");
            $("#dead-line-block").addClass("hidden");

            var simCode = $("#sim").val();
            $.ajax({  
                type : "POST",  //提交方式  
                url : "/sms/app/search.php",//路径  
                data : {  
                    "sim" : simCode  
                },//数据，这里使用的是Json格式进行传输  
                success : function(result) {//返回数据根据结果进行相应的处理  
                    if ( result.code == 0 ) {  
                        $("#un-open-block").removeClass("hidden");
                        $("#type-text").html(result.data.card_type);
                    } else if ( result.code == -1 ) {  
                        $("#un-exist-block").removeClass("hidden");
                    } else if (result.code == -2) {
                        $("#dead-line-block").removeClass("hidden");
                    } else {  
                        $("#result-block").removeClass("hidden");
                        $("#sim-text").html("SIM卡号："+result.data.card_no);
                        $("#time-text").html("开通时间："+result.data.open_time);
                        $("#type-text").html("类型："+result.data.card_type);
                    }  
                }  
            });
          });
        });
    </script>
  </body>
</html>